<template>
	<view class="activedetial">
		<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/yshop.png" class="activedetialback" mode="">
		</image>
		<scroll-view class="shangpings" scroll-y="true" @scrolltolower="initBottom()">
			<view class="msgicon" v-if="!List.length">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(21).png" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无商品
				</view>
			</view>
			<view class="itemshangp" v-for="(item,index) in List" :key="index" @click="gopage(item)">
				<view class="leftcontent">
					<view class="titlebox">
						{{item.title}}
					</view>
					<view class="texts">
						{{item.detail}}
					</view>
					<view class="jiageline">
						<view class="yushou">
							预售价
						</view>
						<view class="jiagenum">
							￥{{item.price}}
						</view>
					</view>
				</view>
				<view class="rightimagebox">
					<image :src="item.image" class="imagebtn" mode=""></image>
					<view class="btn1" @click.stop="ljcy(item)">
						立即参与
					</view>
				</view>
			</view>
			<view class="" style="height: 50rpx;">

			</view>
		</scroll-view>
		<up-popup :show="show" mode="center" :zoom="false">
			<view class="popuview">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wwxxRectangle 24432@2x.png"
					class="popuviewback" mode=""></image>
				<view class="titletext">
					是否参与
				</view>
				<view class="inputbox">
					<view class="lable">
						购买数量：
					</view>
					<input type="number" v-model="num" placeholder="请输入购买数量" />
				</view>
				<view class="btnss">
					<view class="btn" @click="show=false">
						取消
					</view>
					<view class="save" @click="qd">
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show1" mode="center" :zoom="false">
			<view class="zhifusucess">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (9).png" class="closeicon"
					mode="" @click="show1=false" />
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(19).png" mode=""
					class="centernimg"></image>
				<view class="text">
					参与成功
				</view>
				<view class="btn" @click="show1=false">
					确定
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	import {
		yushougoods,
		canyuys
	} from '@/api/home.js'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	const show = ref(false)
	const show1 = ref(false)
	const itemobj = ref({})
	const total = ref(0)
	const num = ref('')
	const List = ref([])
	const query = reactive({
		list_rows: 10,
		page: 1
	})
	onLoad(() => {
		init()
	})

	function initBottom() {
		if (total.value > List.value.length) {
			query.page++
			init()
		}
	}
	async function init() {
		const res = await yushougoods(query)
		if (res.code == 1) {
			total.value = res.data.total
			List.value.push(...res.data.data)
		}
	}

	function gopage(item) {
		uni.navigateTo({
			url: '/pages/home/yushoudetial?id=' + item.id
		})
	}

	async function qd() {
		if (!num.value) {
			uni.showToast({
				title: '请输入购买数量',
				icon: 'none'
			})
			return
		}
		const res = await canyuys({
			gid: itemobj.value.id,
			num: num.value
		})
		if (res.code == 1) {
			show.value = false
			show1.value = true
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function ljcy(item) {
		itemobj.value = item
		num.value = ''
		show.value = true
	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.zhifusucess {
		width: 610rpx;
		background: linear-gradient(180deg, #FDE9D2 0%, #FFFFFF 27%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.closeicon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}

		.centernimg {
			width: 124rpx;
			height: 124rpx;
			margin-top: 108rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 20rpx;
		}

		.btn {
			width: 254rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 60rpx auto;
		}
	}

	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0) !important;
		// border-radius: 32rpx 32rpx 32rpx 32rpx;
	}

	.popuview {
		width: 668rpx;
		height: 476rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;

		.popuviewback {
			width: 668rpx;
			height: 476rpx;
			position: absolute;
			z-index: -1;
		}

		.titletext {
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
			margin-top: 48rpx;

		}

		.btnss {
			width: 604rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 72rpx;

			.btn {
				width: 284rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #4E5969;
			}

			.save {
				width: 284rpx;
				height: 80rpx;
				background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.inputbox {
			width: 604rpx;
			height: 84rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F7F8FA;
			margin: auto;
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #1D2129;
				margin-left: 28rpx;
			}

			input {
				font-size: 28rpx;
				margin-right: 32rpx;
				text-align: right;
			}
		}
	}

	.activedetial {
		width: 100%;
		overflow: hidden;
		position: relative;
		min-height: 100vh;

		.activedetialback {
			width: 100%;
			height: 1910rpx;
			position: absolute;
			z-index: -1;
		}

		.shangpings {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 720rpx;
			// padding: 30rpx 0;
			max-height: 750rpx;
			overflow-y: scroll;

			.itemshangp {
				width: 686rpx;
				height: 214rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 48rpx;

				.rightimagebox {
					margin-right: 24rpx;
					width: 218rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.imagebtn {
						width: 218rpx;
						height: 218rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						position: absolute;
						margin-top: -28rpx;
					}

					.btn1 {
						width: 216rpx;
						height: 56rpx;
						background: #E85C47;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						text-align: center;
						line-height: 56rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						margin: auto;
						z-index: 999;
						margin-top: 148rpx;
						color: #FFFFFF;
					}
				}

				.leftcontent {
					width: 422rpx;

					.titlebox {
						width: 284rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 限制文本为2行 */
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						overflow: hidden;
						text-align: center;
						height: 62rpx;
						line-height: 62rpx;
						background: #FDEE62;
						border-radius: 16rpx 31rpx 31rpx 0rpx;
						margin-top: -20rpx;
					}

					.texts {
						margin-left: 24rpx;
						width: 398rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;
						margin-top: 20rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.jiageline {
						margin-left: 24rpx;
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.yushou {
							width: 88rpx;
							height: 32rpx;
							background: #F53F3F;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							text-align: center;
							line-height: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.jiagenum {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #F53F3F;
							margin-left: 5rpx;
						}
					}
				}

			}
		}
	}
</style>